<template>
	<div>

	</div>
  </template>
  <!-- 
  <script>
  import { ref, onMounted } from "vue";
  // 如果使用 npm 安装 Stripe，导入 Stripe
  import { loadStripe } from "@stripe/stripe-js";
  
  export default {
	name: "StripeCardValidation",
	setup() {
	  const stripe = ref(null);
	  const elements = ref(null);
	  const card = ref(null);
	  const cardErrors = ref("");
	  const validationResult = ref("");
  
	  // 在组件挂载时加载 Stripe 实例
	  onMounted(async () => {
		stripe.value = await loadStripe("pk_test_51Qwqab4hjKHAJxYpJehf2Y5DkVGRNUtqjS92RHKV3n1pV8Ncfa51WAIYOA7R7jmD6Jrl9nu6tdXufIZMGTODj0Zy00uy9PJa3D");
		elements.value = stripe.value.elements();
		card.value = elements.value.create("card");
		card.value.mount("#card-element");
	  });
  
	  const handleSubmit = async () => {
		cardErrors.value = "";  // 清除之前的错误信息
		validationResult.value = "";  // 清除之前的验证结果
  
		try {
		  // 从服务器获取 SetupIntent 的 client_secret
		  const response = await fetch("/api/uti/payment/create-setup-intent", {
				method: "POST",
				}); 
				console.log('response',response);
		  const clientSecret = await response.text();
		  console.log('clientSecret',clientSecret);
		  // 使用 clientSecret 确认卡片设置
		  const result = await stripe.value.confirmCardSetup(clientSecret, {
			payment_method: { card: card.value }
		  });
		  console.log('result',result);
  
		  // 处理结果并更新 UI
		  if (result.error) {
			cardErrors.value = result.error.message;
			validationResult.value = "";
		  } else {
			cardErrors.value = "";
			validationResult.value = `卡片验证成功！PaymentMethod ID: ${result.setupIntent.payment_method}`;
			console.log("PaymentMethod ID:", result.setupIntent.payment_method);
		  }
		} catch (error) {
		  cardErrors.value = "发生错误，请稍后重试。";
		  validationResult.value = "";
		}
	  };
  
	  return {
		cardErrors,
		validationResult,
		handleSubmit
	  };
	}
  };
  </script>
  
<style scoped>
	#card-element { width: 300px; padding: 10px; border: 1px solid #ccc; margin-bottom: 10px; }
	#card-errors { color: red; }
	#error {
	color: red;
	}
</style> -->
